<template>
  <div>
    <a-row :gutter="20">
      <a-col :span="6">
        <a-card style="height: 120px">
          <h1>服务器系统</h1>
          {{ sysInfo.system.name }}
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card style="height: 120px">
          <h1>内存占用情况(MB)</h1>
          <count-to :endVal="sysInfo.memory.curr"></count-to>
          /
          <count-to :endVal="sysInfo.memory.total"></count-to>
          <a-progress
            style="width: 90%"
            :percent="sysInfo.memory.percent"
            status="active"
          />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card style="height: 120px">
          <h1>服务器CPU架构</h1>
          <div>{{ sysInfo.cpu.model }}</div>
          {{ sysInfo.cpu.core }}核/{{ sysInfo.cpu.arch }}
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card style="height: 120px">
          <h1>您的IP地址</h1>
          {{ sysInfo.ip }}
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="20" style="margin: 20px 0">
      <a-col :span="8">
        <a-card
          :loading="loading"
          style="font-size: 14px"
          title="一段普通的软文"
        >
          <div>首先这个肯定比不上ele-admin、ruoyi、jeecg和antdv-pro</div>
          <div>以及其他的几百个知名框架</div>
          <div>但以上的框架有个问题就是对新手不太友好</div>
          <div>其实这也不是框架的问题</div>
          <div>而是新手的问题</div>
          <div>而simba-admin的定位是帮助新手向成手转变</div>
          <div>没有封装成那个样子（哪个样子？</div>
          <div>你可以基于她开始开发，减少重复的劳动</div>
          <div>也可以通过阅读源码，从中汲取营养</div>
          <div>拒绝代码堆砌，体验封装美学</div>
        </a-card>
      </a-col>
      <a-col :span="9">
        <a-card :loading="loading" title="如果付费你会得到什么？">
          <div>
            价格：<count-to :endVal="999"></count-to
            >/R
          </div>
          <div>1.本框架的从0搭建的视频教程</div>
          <div>2.及时响应的答疑和支持</div>
          <div>3.一个基于这个框架写的商城后台管理项目源码</div>
        </a-card>
      </a-col>
      <a-col :span="7">
        <a-card :loading="loading" title="联系我们">
          <div>
            <i-ie />&nbsp;
            <a href="http://simbajs.com" target="_blank">simbajs.com</a>
          </div>
          <div>
            互助<i-Qq />群&nbsp;
            <a href="https://jq.qq.com/?_wv=1027&k=SzRJLxVp">534937912</a>
            &
            <a href="https://jq.qq.com/?_wv=1027&k=npzmcZeo">298058943</a>
          </div>
          <div>
            <i-Qq />&nbsp;674254975&nbsp;&nbsp;&nbsp;&nbsp;<i-Wechat />&nbsp;simba_js
          </div>
          <div></div>
          <div><i-Wechat />&nbsp;公众号&nbsp;shendu_studio</div>
          <div>
            <i-Github />&nbsp;
            <a href="https://github.com/SimbaZZX" target="_blank">SimbaJS</a>
            &nbsp;&nbsp;博客&nbsp;
            <a href="https://juejin.cn/user/1151943918757144" target="_blank"
              >SimbaJS</a
            >
            &nbsp;&nbsp;B站&nbsp;
            <a href="https://space.bilibili.com/425325651" target="_blank"
              >SimbaJS</a
            >
          </div>
          <p style="margin-top: 20px"
            ><strong>祝开卷有益。</strong></p
          >
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import echarts from "echarts";
import { onMounted, ref } from "vue";
import { $get } from "~mixins/useRequest";
import { CountTo } from "~components";

export default {
  components: { CountTo },
  setup() {
    let sysInfo = ref({
      system: {
        type: "",
        name: "",
        zzz: "",
      },
      cpu: {
        arch: "",
        core: "",
      },
      memory: "",
    });
    async function getSysInfo() {
      let { data } = await $get("/system/getSysInfo");
      sysInfo.value = data;
      // initChart1(data.memory[0], data.memory[1]);
    }
    let chart1 = ref(null);
    // function initChart1(val, total) {
    //   // 基于准备好的dom，初始化echarts实例
    //   var myChart = echarts.init(chart1.value);

    //   window.onresize = () => {
    //     myChart.resize();
    //   };

    //   // 指定图表的配置项和数据
    //   var option = {
    //     tooltip: {},
    //     background: "#fff",
    //     legend: {
    //       data: ["预算分配", "实际开销"],
    //     },
    //     color: ["#369", "#f40"],
    //     radar: {
    //       // shape: 'circle',
    //       name: {
    //         textStyle: {
    //           color: "#fff",
    //           backgroundColor: "#999",
    //           borderRadius: 3,
    //           padding: [3, 5],
    //         },
    //       },
    //       indicator: [
    //         { name: "Vue", max: 1000 },
    //         { name: "React", max: 1000 },
    //         { name: "Angular", max: 1000 },
    //         { name: "uni-App", max: 1000 },
    //         { name: "Node", max: 1000 },
    //         { name: "JavaScript", max: 1000 },
    //       ],
    //     },
    //     series: [
    //       {
    //         type: "radar",
    //         // areaStyle: {normal: {}},
    //         data: [
    //           {
    //             value: [830, 600, 500, 300, 800, 900],
    //             name: "兴趣值",
    //           },
    //           {
    //             value: [500, 140, 280, 100, 420, 510],
    //             name: "能力值",
    //           },
    //         ],
    //       },
    //     ],
    //   };

    //   myChart.setOption(option);
    // }

    onMounted(() => {
      getSysInfo();
    });
    let loading = ref(true);

    setTimeout(() => {
      loading.value = false;
    }, 1000);

    return { sysInfo, chart1, loading };
  },
};
</script>

<style scoped lang='scss'>
.ant-card-body {
  div {
    padding: 3px 0;
  }
}
</style>